<template>
	<view class="">
		<shopro-login-modal></shopro-login-modal>
		<view class="content">
			<view class="head_box">
				<image style="width: 100%; height: 100%;
				position: absolute; left: 0; z-index: -1;" mode="aspectFill" 
				src="https://shiliu.gdxuanbao.com/static/upload/images/3/2021/11/bEwcqOqK9Ce4CWwoAcW99uSeucOsO8.png"></image>
				<!-- <image style="width: 550upx; height: 275upx; margin-top: 190upx;" src="../../static/images/hot-group/hot-group-index-tips.png"></image> -->
			</view>
			<!-- tab -->
			<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
				<view class="order-nav">
					<view class="nav-item" v-for="(nav, index) in orderState"  :key="index"
						@tap="onNav(index, nav)">
						<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.name }}</view>
						<view class="nav-line" :class="{ 'line-active': tabindex === index }"></view>
					</view>
				</view>
			</scroll-view>
			
			<view class="chengtuan-box">
				<mescroll-body ref="mescrollRef" height="1050" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="chengtuan-list">
					<view class="chengtuan-item"
					v-for="(item, index) in homeCollage" :key="index">
						<view class="goods-img">
							<image :src="item.has_one_goods.thumb"></image>
						</view>
						<view class="goods-detail">
							<view class="goods-name text-line2">{{item.title}} </view>
							<view class="tips" style="color: #FF5E24;">{{item.fight_describe}}</view>
							<view style="display: flex; align-items: center; margin-top: 3upx;">
									<view style="flex: 1;">
										<u-line-progress height="10" style="height: 11upx; width: 326upx;" active-color="#FF4F10"
											:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
											:show-percent="false"></u-line-progress>
									</view>
								<view style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx; padding-top: 10upx;"> <text
										style="color: #FF5E24;">{{item.ba_team.has_many_success_member_count}} </text> /{{item.has_many_option_levels[0]['member_num']}}</view>
							</view>
							<view class="price-box">
								<view class="price-left">¥{{item.has_many_option_levels[0]['group_price']}}</view>
								<view><text style="color: #B2B2B2;">成团：</text>{{item.has_many_team_count}}次</view>
							</view>
						</view>
						<view class="right-box" @click="junit('/pages/index/goods-detail/goods-detail', {id: item.fight_id});">
							<image class="tips-image" src="../../static/images/tabbar/hot-group-select.png"></image>
							<view style="margin-top: 19upx; font-size: 16upx; color: #FFFFFF;">拼后领补贴</view>
							<view style="font-size: 16upx; color: #FFFFFF;">{{item.ba_team.has_many_success_member_count}}人已领取</view>
							<view class="right-box-footer">
								<text>马上拼</text>
								<image src="../../static/images/index/loding.png" style="width: 10upx; height: 18upx;"></image>
							</view>
						</view>
					</view>
				</view>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				title: 'Hello',
	
				tabindex: 0,
				orderState: [],
				homeCollage: [],
				tabList: [],
				type: 0,
				page: 1,
			}
		},
		async onLoad() {
			await this.gethomePagWxapp();
		},
		methods: {
			junit(url, query = {}) {
				this.$Router.push({
					path: url,
					query: query
				});
			},
			onNav(index, nav) {
				this.tabindex = index;
				this.type = nav.id;
				this.page = 1;
				this.downCallback();
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.page = page.num;
				this.$http.get('index.fightGroupsHomeCollage', {
					i:3,
					uuid:0,
					type:5,
					basic_info:1,
					validate_page: 1,
					route: "test.homeCollage",
					page: this.page,
					cate_id: this.type
				}).then(res => {
					let curPageData = res.data.data;
					let curPageLen = curPageData.length;
					let totalCount = res.data.total;
					if (page.num == 1) this.homeCollage = []; //如果是第一页需手动置空列表
					this.homeCollage = this.homeCollage.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalCount);
				})
			},
			// 获取拼团分类 
			gethomePagWxapp(){
				return this.$http.get('hotGroup.homePagWxapp').then(res => {
					this.orderState = res.data;
					this.type = this.orderState[0]['id'];
				})
			},
			// 即将成团数据
			getfightGroupsHome(){
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		
		.head_box{
			height: 783upx;
			// background-image: url(../../static/images/hot-group/hot-group-index-bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			text-align: center;
			position: relative;
		}
	}
	
	.tabs-content {
		white-space: nowrap;
		margin-top: 30upx;
			.order-nav{
				display: inline-block;
				width: 100%;
				.nav-item{
					display: inline-block;
					width: 25%;
					text-align: center;
					font-size: 30upx;
					.item-title-active{
						color: #FF4F10;
					}
					.nav-line {
						width: 100upx;
						height: 4upx;
						background: #fff;
						margin: 0 auto;
						margin-top: 13upx;
					}
					
					.line-active {
						background: #FF4F10;
					}
				}
			}
	}
	
	.chengtuan-box{
				padding-top: 13upx;
				.chengtuan-list{
					
					.chengtuan-item{
							width: 694upx;
							height: 238upx;
							background: #FFFFFF;
							box-shadow: 0px 30upx 51upx 25upx rgba(243, 243, 243, 0.76);
							margin: 0 auto;
							margin-top: 13upx;
							border-radius: 10upx;
							display: flex;
							justify-content: space-between;
							.goods-img{
								margin-left: 18upx;
								margin-top: 23upx;
								min-width: 187upx;
								height: 190upx;
								background: #FFFFFF;
								border: 1upx solid #EEEEEE;
								border-radius: 10upx;
								position: relative;
								image{
									width: 151upx;
									height: 162upx;
									border-radius: 10upx;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
								}
							}
							.goods-detail{
								flex: 1;
								font-size: 28upx;
								color: #050505;
								font-weight: 500;
								margin-left: 17upx;
								margin-top: 27upx;
								padding-right: 25upx;
								max-width: 300upx;
								.goods-name{
									font-size: 22upx;
								}
								.tips{
									margin-top: 7upx;
									font-size: 22upx;
								}
								.price-box{
									font-size: 25upx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 10upx;
									color: #FF652E;
								}
								.pingtuan{
									width: 380upx;
									height: 55upx;
									background: #FF4F10;
									border-radius: 24upx;
									text-align: center;
									color: #FFFFFF;
									font-size: 26upx;
									line-height: 55upx;
									margin-top: 7upx;
								}
							}
						
							.right-box{
								width: 141upx;
								height: 238upx;
								background: linear-gradient(-86deg, #FF5A1F, #FA8358);
								border-radius: 10upx;
								text-align: center;
								padding-top: 25upx;
								.tips-image{
									width: 33upx;
									height: 33upx;
								}
								.right-box-footer{
									margin-top: 15upx;
									font-size: 25upx;
									color: #FFFFFF;
									image{
										margin-left: 11upx;
									}
								}
							}
					}
				}
			}
	
	
</style>
